<template>
	<view class="page">
		<!-- 日期范围选择区域 -->
		<view class="bg-white padding">
			<view class="flex align-center justify-between">
				<u-icon name="calendar" size="36rpx" color="#999"></u-icon>
				<u-text align="center" color="#999" size="28rpx" :text="startDate" @click="showStartDatePicker = true"></u-text>
				<u-text align="center" color="#999" size="28rpx" text="至"></u-text>
				<u-text align="center" color="#999" size="28rpx" :text="endDate" @click="showEndDatePicker = true"></u-text>
			</view>
		</view>
		<view class="main">
			<view class="bg-white radius-lg padding margin-bottom" v-for="i in 3" :key="i">
				<view class="flex gap align-center">
					<image src="/static/image/teacher/icon-student-exercise.png" mode="aspectFit"
						style="width: 88rpx; height: 88rpx;">
					</image>
					<view class="flex-1">
						<u-text bold text="张三的练习题-数学" size="32rpx" color="#333"></u-text>
						<u-text margin="10rpx 0 0 0" text="2025-01-01 12:00:00" size="24rpx" color="#999"></u-text>
					</view>
					<view>
						<u-icon name="arrow-right" size="28rpx" color="#999"></u-icon>
					</view>
				</view>
				<view class="margin-top-sm">
					<u-text text="本周共发现10个错题知识点，生成30道练习题" size="24rpx" color="#666"></u-text>
				</view>
			</view>
			<!-- 日期选择器 -->
			<u-datetime-picker :closeOnClickOverlay="true" :show="showStartDatePicker" mode="date" @confirm="confirmStartDate"
				@cancel="showStartDatePicker = false" @close="showStartDatePicker = false" :maxDate="new Date().getTime()">
			</u-datetime-picker>

			<u-datetime-picker :closeOnClickOverlay="true" :show="showEndDatePicker" mode="date" @confirm="confirmEndDate"
				@cancel="showEndDatePicker = false" @close="showEndDatePicker = false" :maxDate="new Date().getTime()">
			</u-datetime-picker>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
const startDate = ref('2020-02-21')
const endDate = ref('2020-03-11')
const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)

const confirmStartDate = (value) => {
	startDate.value = dayjs(value.value).format('YYYY-MM-DD')
	showStartDatePicker.value = false
}

const confirmEndDate = (value) => {
	endDate.value = dayjs(value.value).format('YYYY-MM-DD')
	showEndDatePicker.value = false
}
</script>
